<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onclick = function () {
        var shengarr = ['四川', '上海', '江苏'];
        var shiarr = [['成都市', '遂宁市'], [['上海市']], ['苏州市', '南京市']];
        var quarr = [
            [
                ['锦江区', '武侯区'], ['船山区', '安居区']
            ],
            [
                ['黄浦区', '静安区']
            ],
            [
                ['虎丘区', '吴中区'], ['玄武区', '秦淮区']
            ]
        ];
        function createOption(obj, data) {
            for (var i in data) {
                var op = new Option(data[i], i);
                obj.options.add(op);
            }
        }
        var sheng = document.getElementById('sheng');
        createOption(sheng, shengarr);
        var shi = document.getElementById('shi');
        sheng.onchange = function () {
            shi.options.length = 0;
            createOption(shi, shiarr[sheng.value]);
            if (sheng.value >= 0) {
                shi.onchange();
            }
            else {
                qu.options.length = 0;
            }
        }
        var qu = document.getElementById('qu');
        shi.onchange = function () {
            qu.options.length = 0;
            createOption(qu, quarr[sheng.value][shi.value]);
        }

    }
</script>


<body>
    <form action="">
        <select name="" id="sheng">
            <option value="-1">请选择</option>
        </select>
        <select name="" id="shi"></select>
        <select name="" id="qu"></select>
    </form>
</body>

</html>